Resolved issue with FlashOfUnstyledContent (FOUC) when using jQuery Mobile - #233
Merged
Conversation
Owner
|
Thanks @BrandonLWhite! I haven't done much testing on mobile since I have a very old android smart phone (v2.3.5) which I don't use the internet on LOL. So thanks for taking the time to help improve this project! Rob |
Mottie
added a commit
that referenced
this pull request
Feb 8, 2014
Resolved issue with FlashOfUnstyledContent (FOUC) when using jQuery Mobile
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
There is a 10ms delay after the keyboard is displayed before it actually fires 'visible.keyboard'.
Since the jQuery Mobile plugin restyles the controls in response to the 'visible.keyboard' event, the user will experience FlashOfUnstyledContent (FOUC). I guess technically it's not unstyled -- just the wrong style.
This fix, or workaround rather, avoids this FOUC by first setting the visibility to hidden on 'beforeVisible.keyboard' so that the user doesn't see anything during the delay, then after the mobile styles are applied we set it visible.
This may not be ideal -- but I couldn't think of a better way to approach this without purposely eliminating the setTimeout delay in the core code or by adding another event before the setTimeout.
You don't see the issue in the demo page for jQM, because its not showing keyboards in response to touches/clicks. If you'd prefer to see some test cases, I can put together some fiddles later.
Also, I didn't get a chance to do the minified version. I'm expecting to do another PR, hopefully by Monday.